<template>
  <div>
    <div
      class="
        container
        fws-bg-marse
        shadow-lg
        p-3
        mb-2
        bg-body
        rounded
        mt-3
        rounded-3
      "
    >
      <div class="fws-line-height d-flex">


        <span
          ><i class="el-icon-sunrise-1 text-warning fs-4 fw-bold"></i
          >&nbsp;&nbsp;</span
        >
        <span class="text-dark fw-bold"
          >严选<span class="text-warning">家教公告：</span
          >
        </span>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, temporibus?
      </div>
    </div>
    <!-- next-floor -->
    <div class="container">
      <div class="row fws-card-width">
        <div class="mt-2 col-lg-3 col-md-6 col-12">
          <div class="text-center w-lg-75 p-5 rounded-3 shadow-lg bg-body">Lorem, ipsum.</div>
        </div>
        <div class="mt-2 col-lg-3 col-md-6 col-12">
          <div class="text-center w-lg-75 p-5 rounded-3 shadow-lg bg-body">Lorem, ipsum.</div>
        </div>
        <div class="mt-2 col-lg-3 col-md-6 col-12">
          <div class="text-center w-lg-75 p-5 rounded-3 shadow-lg bg-body">Lorem, ipsum.</div>
        </div>
        <div class="mt-2 col-lg-3 col-md-6 col-12">
          <div class="text-center w-lg-75 p-5 rounded-3 shadow-lg bg-body">Lorem, ipsum.</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
 };
</script>

<style lang="scss" scoped>
.fws-line-height {
  line-height: 40px;
}
.fws-bg-marse {
  background-color: rgba($color: #008c8c, $alpha: 0.4);
}
.fws-card-width {
  div {
    div {
      &:hover {
        background-color: rgba($color: #008c8c, $alpha: 0.4) !important;
      }
    }
  }
}
</style>